import { Layout } from 'antd';
import "../css/water.css"
import Detection from '../component/iptcitr';
import Detectioner from '../component/iptcity2';
import Quality from "../component/Quality"
import Firm from "../component/firm"
import Proprotion from "../component/proprotion1"
import Proprotions from "../component/proportion2"
import Proprotionss from "../component/proprotion3"
import Line from "../component/line"
import Wurantop from "../component/Wurantop"
import Map from "../component/map"
import Time from "../component/Time"
const { Header, Footer, Sider, Content } = Layout;


const App = () => (
    <div >
        <Layout className='bossbox'>
            <Header style={{ padding: "0px", color: "white", display: "flex", justifyContent: "space-between", background: "none" }}>
                <div className='title'>水质情况实时监测预警系统</div>
                <div><Time></Time></div>
            </Header>
            <Content style={{ background: "none", display: "flex", height: "750px" }}>
                <div style={{ width: "25%", marginTop: "20px" }}>
                    <div style={{ color: "white" }}>重点水质检测区
                        <div style={{ display: "flex", justifyContent: "space-between", marginTop: "20px" }}>
                            <div>
                                <p className='city01'>河北省流量</p>
                                <span className='num01'>35,548</span>
                                <span className='danwei'> m3/h</span>
                                <Detection></Detection>
                            </div>
                            <div>
                                <p className='city01'>山西省流量</p>
                                <span className='num01'>29,352</span>
                                <span className='danwei'> m3/h</span>
                                <Detectioner></Detectioner>
                            </div>
                        </div>
                    </div>
                    <div className='quality'>水质分布情况
                        <div>
                            <Quality></Quality>
                        </div>
                    </div>
                    <div className='firm'>企业污染排放情况
                        <Firm></Firm>
                    </div>
                </div>
                <div style={{ width: "50%" }}>
                    <Map></Map>
                    <div className='wrzs'>
                        <div className='zb'>
                            <p className='p1'>数据指标一</p>
                            <p className='p2'>219,654.79</p>
                        </div>
                        <div className='zb'>
                            <p className='p1'>数据指标二</p>
                            <p className='p2'>279,024.06</p>
                        </div>
                        <div className='zb'>
                            <p className='p1'>数据指标三</p>
                            <p className='p2'>225,034.02</p>
                        </div>
                    </div>
                </div>
                <div className='right' style={{ width: "25%" }}>
                    <div>
                        <div className='proprotitle'>水质污染TOP10</div>
                        <div className='wurantop'>
                            <Wurantop></Wurantop>
                        </div>
                    </div>
                    <div >
                        <p className='proprotitle'>水质类别占比</p>
                        <div className='proprotion'>
                            <Proprotion></Proprotion>
                            <Proprotions></Proprotions>
                            <Proprotionss></Proprotionss>
                        </div>
                    </div>
                    <div className='mount'>
                        <p className='proprotitle'>主要地区水流量</p>
                        <div className='llsj'>
                            <div className='sxsll'>
                                <p>陕西省流量</p>
                                <span className='llnum'>25,428</span>
                                <span>m3/h</span>
                            </div>
                            <div className='hnsll'>
                                <p>河南省流量</p>
                                <span className='llnum'>23,348</span>
                                <span>m3/h</span>
                            </div>
                        </div>
                        <div className='zujian'>
                            <Line></Line>
                        </div>
                    </div>
                </div>
            </Content>
        </Layout>
    </div >
);

export default App;